<template>
  <el-dialog @closed="handleClose" :visible.sync="visible" :append-to-body="true" :title="title">
    <div class="ent-dialog">

      <el-form :show-message="false" :rules="rules" ref="form" class="ent-form" :model="form" label-width="auto">

        <el-form-item label="单位名称：" prop="entName">
          <el-input v-model="form.entName" />
        </el-form-item>

        <el-form-item label="单位简称：" prop="entSimpleName">
          <el-input v-model="form.entSimpleName" />
        </el-form-item>

        <el-form-item label="三证合一税号：" prop="taxNo">
          <el-input v-model="form.taxNo" />
        </el-form-item>

        <el-form-item label="开户行：" prop="bankName">
          <el-input v-model="form.bankName" />
        </el-form-item>

        <el-form-item label="户名：" prop="accountName">
          <el-input v-model="form.accountName" />
        </el-form-item>

        <el-form-item label="账号：" prop="accountNo">
          <el-input v-model="form.accountNo" />
        </el-form-item>

        <el-form-item label="法人：" prop="legalPerson">
          <el-input v-model="form.legalPerson" />
        </el-form-item>

        <el-form-item label="类型：" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="状态：" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <div class="flex flextc footerBtn m-t-25">
          <el-button v-if="!isEdit" class="defaultbtn saveBtn" @click="handleSave">保存</el-button>
          <el-button v-else class="defaultbtn saveBtn" @click="handleUpdate">更新</el-button>
          <el-button v-if="!isEdit" class="defaultbtn clsoeBtn" @click="handleCloseDialog">关闭</el-button>
          <el-button v-else class="defaultbtn clsoeBtn" @click="handleCloseDialogUpdate">关闭</el-button>
        </div>
      </el-form>
    </div>

  </el-dialog>
</template>

<script>
import { updateEntArticle, createEntAdd } from '@/api/operation/ent'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'Ent',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      rules: {
        entName:[{ required:true,message:'请输入单位名称',trigger:'change'}],
        entSimpleName:[{ required:true,message:'请输入单位简称',trigger:'change'}],
        taxNo:[{ required:true,message:'请输入税号',trigger:'change'}],
        bankName:[{ required:true,message:'请输入开户行',trigger:'change'}],
        accountName:[{ required:true,message:'请输入户名',trigger:'change'}],
        accountNo:[{ required:true,message:'请输入账号',trigger:'change'}],
        legalPerson:[{ required:true,message:'请输入法人名称',trigger:'change'}],
        type:[{ required:true,message:'请输入类型',trigger:'change'}],
        status:[{ required:true,message:'请输入状态',trigger:'change'}]
      },
      type: [
        {
          value: 1,
          label: '供应商'
        },
        {
          value: 2,
          label: '客户'
        },
        {
          value: 3,
          label: '安装单位'
        }
      ],
      status: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 2,
          label: '停用'
        }
      ],
      visible: false,
      dataList: [],
      form: { ...this.data },
      title: '往来单位管理',
      formOrigin: {
        id: '',
        accountName: '',
        accountNo: '',
        bankName: '',
        legalPerson: '',
        type: '',
        status: '',
        entName: '',
        entSimpleName: '',
        taxNo: '',
        version: ''
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  mounted() { },
  methods: {
    handleClose(){
      this.$refs.form.resetFields();
    },
    // 自定义错误弹窗
    customValid(field){
      let arr = [];
      for(let item in field){
        arr.push(item)
      }
      showNotice('error','提示',field[arr[0]][0].message)
    },
    handleUpdate() {
      this.$refs.form.validate((valid,field) => {
        if (valid) {
          const upEnt = {
            id: this.form.id,
            orgId: JSON.parse(this.$storage.get('userInfo')).orgList[0].id,
            accountName: this.form.accountName,
            accountNo: this.form.accountNo,
            bankName: this.form.bankName,
            legalPerson: this.form.legalPerson,
            type: this.form.type,
            status: this.form.status,
            entName: this.form.entName,
            entSimpleName: this.form.entSimpleName,
            taxNo: this.form.taxNo,
            version: this.form.version
          }
          updateEntArticle(upEnt).then((res) => {
            if (res.code === '000000') {
              showNotice('success', '提示', '保存成功!')
              this.$emit('handleRefresh')
              this.$emit('handleCloseDialog')
            }
          })
        } else {
          this.customValid(field)
        }
      })

    },
    handleCloseDialog() {
      console.log('子组件关闭')
      this.$emit('handleCloseDialog')
    },
    handleCloseDialogUpdate() {
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
    },
    handleSave() {
      this.$refs.form.validate((valid,field) => {
        if (valid) {
          this.form.orgId = JSON.parse(this.$storage.get('userInfo')).orgList[0].id
          this.handleCreateAdd(this.form)
        } else {
          this.customValid(field)
        }
      })

    },
    // }
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    handleCreateAdd(data) {
      createEntAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";
::v-deep .el-dialog__body {
  padding: 30px 20px;
  height: auto;
  background-color: #fff;
}
.clsoeBtn,
.saveBtn {
  width: 100px;
  height: 40px;
}
.el-button + .el-button {
  margin-left: 30px;
}

.el-dialog__body {
  padding: 30px;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  height: auto;
  .el-dialog__title {
    color: #ffffff;
  }
}
.ent-form {
  padding: 0 30px;
}

::v-deep .el-dialog {
  width: 40%;
}
</style>
